import {Button, Card, Col, DatePicker, Descriptions, message, Modal, Row, Select, Tabs, Tag } from "antd";
import TabPane from "antd/es/tabs/TabPane";
import { useEffect, useState } from "react";
import {
   
     PhoneOutlined, 
   ClockCircleOutlined,
   CheckCircleOutlined, CloseCircleOutlined
} from '@ant-design/icons';

// 客户详情模态框组件
export const CustomerDetailModal = ({ visible, onClose, customer, onFollowUp }) => {
    const [loading, setLoading] = useState(false);
    const [followUpVisible, setFollowUpVisible] = useState(false);
    const [followUpForm, setFollowUpForm] = useState({
        content: '',
        nextDate: null,
        status: customer?.status || ''
    });

    // 当客户信息变化时更新表单
    useEffect(() => {
        if (customer) {
            setFollowUpForm(prev => ({
                ...prev,
                status: customer.status
            }));
        }
    }, [customer]);

    // 处理跟进表单变化
    const handleFormChange = (key, value) => {
        setFollowUpForm({
            ...followUpForm,
            [key]: value
        });
    };

    // 提交跟进记录
    const handleSubmitFollowUp = () => {
        if (!followUpForm.content.trim()) {
            message.error('请输入跟进内容');
            return;
        }

        setLoading(true);
        
        // 模拟API请求
        setTimeout(() => {
            const followUpRecord = {
                id: `F${Date.now()}`,
                content: followUpForm.content,
                time: dayjs().format('YYYY-MM-DD HH:mm'),
                follower: customer.follower,
                status: followUpForm.status
            };
            
            // 调用父组件的回调函数处理跟进记录
            onFollowUp(followUpRecord, followUpForm.nextDate, followUpForm.status);
            setFollowUpVisible(false);
            setFollowUpForm({
                content: '',
                nextDate: null,
                status: followUpForm.status
            });
            setLoading(false);
            message.success('跟进记录已保存');
        }, 800);
    };

    if (!customer) return null;
// 渲染客户类型标签
const renderCustomerType = (type) => {
    switch (type) {
        case 'clue':
            return <Tag color="blue">线索客户</Tag>;
        case 'vip':
            return <Tag color="gold">VIP客户</Tag>;
        case 'public':
            return <Tag color="green">公海客户</Tag>;
        default:
            return <Tag>未知类型</Tag>;
    }
};

// 渲染状态标签
const renderStatusTag = (status) => {
    switch (status) {
        case '已完成':
            return <Tag color="green"><CheckCircleOutlined /> 已完成</Tag>;
        case '跟进中':
            return <Tag color="processing"><ClockCircleOutlined /> 跟进中</Tag>;
        case '待跟进':
            return <Tag color="orange"><ClockCircleOutlined /> 待跟进</Tag>;
        case '已放弃':
            return <Tag color="red"><CloseCircleOutlined /> 已放弃</Tag>;
        default:
            return <Tag>{status}</Tag>;
    }
};

   

     // 跟进状态
    const followUpData = [
        { value: "all", label: "全部状态" },
        { value: "待跟进", label: "待跟进" },
        { value: "跟进中", label: "跟进中" },
        { value: "已完成", label: "已完成" },
        { value: "已放弃", label: "已放弃" }
    ];

    // 模拟推广详情数据
    const promotionDetails = {
        cost: 200,
        channel: '微信朋友圈广告',
        startDate: '2023-05-01',
        endDate: '2023-06-30',
        clicks: 1250,
        conversions: 38,
        conversionRate: '3.04%'
    };

    return (
        <Modal
            title={`客户详情 - ${customer.name}`}
            open={visible}
            onCancel={onClose}
            width={800}
            footer={null}
            destroyOnHidden
            style={{top:50}}
        >
            <Tabs defaultActiveKey="base" animated>
                <TabPane tab="基本信息" key="base">
                    <Card>
                        <Row gutter={[24, 24]}>
                            <Col xs={24} sm={12}>
                                <Descriptions column={1} bordered>
                                    <Descriptions.Item label="客户ID">{customer.id}</Descriptions.Item>
                                    <Descriptions.Item label="客户姓名">{customer.name}</Descriptions.Item>
                                    <Descriptions.Item label="联系电话">{customer.phone}</Descriptions.Item>
                                    <Descriptions.Item label="客户类型">{renderCustomerType(customer.type)}</Descriptions.Item>
                                    <Descriptions.Item label="推广来源">{customer.source}</Descriptions.Item>
                                </Descriptions>
                            </Col>
                            <Col xs={24} sm={12}>
                                <Descriptions column={1} bordered>
                                    <Descriptions.Item label="推广方案">{customer.plan}</Descriptions.Item>
                                    <Descriptions.Item label="推广日期">{customer.date}</Descriptions.Item>
                                    <Descriptions.Item label="跟进状态">{renderStatusTag(customer.status)}</Descriptions.Item>
                                    <Descriptions.Item label="跟进人">{customer.follower}</Descriptions.Item>
                                    <Descriptions.Item label="下次跟进时间">{customer.nextFollow || '--'}</Descriptions.Item>
                                </Descriptions>
                            </Col>
                        </Row>

                        <div style={{ marginTop: 20, textAlign: 'right' }}>
                            <Button
                                type="primary" 
                                icon={<PhoneOutlined />}
                                onClick={() => setFollowUpVisible(true)}
                            >
                                记录跟进
                            </Button>
                        </div>
                    </Card>
                </TabPane>

               

                <TabPane tab="推广详情" key="promotion">
                    <Card>
                        <Descriptions column={2} bordered>
                            <Descriptions.Item label="推广渠道">{promotionDetails.channel}</Descriptions.Item>
                            <Descriptions.Item label="推广费用">¥{promotionDetails.cost}</Descriptions.Item>
                            <Descriptions.Item label="推广开始日期">{promotionDetails.startDate}</Descriptions.Item>
                            <Descriptions.Item label="推广结束日期">{promotionDetails.endDate}</Descriptions.Item>
                            <Descriptions.Item label="广告点击量">{promotionDetails.clicks} 次</Descriptions.Item>
                            <Descriptions.Item label="转化数量">{promotionDetails.conversions} 人</Descriptions.Item>
                            <Descriptions.Item label="转化率" span={2}>{promotionDetails.conversionRate}</Descriptions.Item>
                        </Descriptions>
                    </Card>
                </TabPane>
            </Tabs>

            {/* 跟进记录表单模态框 */}
            <Modal
                title="记录跟进信息"
                open={followUpVisible}
                onCancel={() => setFollowUpVisible(false)}
                onOk={handleSubmitFollowUp}
                confirmLoading={loading}
                destroyOnHidden={true}
            >
                <div style={{ marginBottom: 16 }}>
                    <label style={{ display: 'block', marginBottom: 8, fontWeight: 500 }}>
                        跟进内容
                    </label>
                 
                </div>
                
                <div style={{ marginBottom: 16 }}>
                    <label style={{ display: 'block', marginBottom: 8, fontWeight: 500 }}>
                        客户状态
                    </label>
                       <Select
                                    defaultValue="all"
                                    style={{ width: '100%' }}
                                    onChange={(value) => handleFormChange('status', value)}
                                    options={followUpData}
                                />
                  
                </div>
                
                <div>
                    <label style={{ display: 'block', marginBottom: 8, fontWeight: 500 }}>
                        下次跟进时间
                    </label>
                    <DatePicker
                        style={{ width: '100%' }}
                        value={followUpForm.nextDate ? dayjs(followUpForm.nextDate) : null}
                        onChange={(date) => handleFormChange('nextDate', date ? date.format('YYYY-MM-DD') : null)}
                        placeholder="选择下次跟进时间"
                    />
                </div>
            </Modal>
        </Modal>
    );
};